<template>
	<div class="relative">
		<div class="absolute right-0 top-20px z-10 flex items-center">
			<div class="border-1px border-#ffffff border-solid w-14px h-14px flex items-center justify-center">
				<img src="/transaction/spot/selected-false.svg" class="w-full h-full" v-if="!selected" @click="selected = !selected"/>
				<img src="/transaction/spot/selected-true.svg" class="w-full h-full" v-else
				@click="selected = !selected"/>
			</div>
			<p class="text-12px ml-10px">隐藏其他交易对</p>
		</div>
		<el-tabs v-model="activeName" class="spot-tables-index-tabs">
			<el-tab-pane label="当前委托(0)" name="first">
				<div class="pt-10px">
					<CurrentCommission></CurrentCommission>
				</div>
			</el-tab-pane>
			<el-tab-pane label="历史委托" name="second">
				<div class="pt-10px">
					<HistoryCommission></HistoryCommission>
				</div>
			</el-tab-pane>
			<el-tab-pane label="历史成交" name="third">
				<div class="pt-10px">
					<HistoryTrade></HistoryTrade>
				</div>
			</el-tab-pane>
			<el-tab-pane label="持有资产" name="fourth">
				<div class="pt-10px">
					<HoldAssets></HoldAssets>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script lang="ts" setup>
import CurrentCommission from "./CurrentCommission.vue";
import HistoryCommission from "./HistoryCommission.vue";
import HistoryTrade from "./HistoryTrade.vue";
import HoldAssets from "./HoldAssets.vue";
const selected = ref<boolean>(false)
const activeName = ref<string>('first')
</script>
<style lang="scss">
.spot-tables-index-tabs {
	z-index: 9;

	.el-tabs__nav-wrap:after {
		height: 4px;
		background-color: #202020;
	}

	.el-tabs__header {
		height: 64px;
		margin-bottom: 0;

		.el-tabs__nav-wrap {
			height: 100%;
		}

		.el-tabs__nav-scroll {
			// padding-left: 20px;
			padding-top: 20px;
			color: #FFFFFF;

			.el-tabs__item {
				// padding-top: 16px;
				padding-bottom: 24px;
				font-size: 14px;
				color: #B5B5B5;
			}

			.is-active {
				color: #FFFFFF;
			}
		}

		.el-tabs__active-bar {
			height: 4px;
		}
	}
}
</style>
